<template>
  <div class="yard-details-table flex flex-column">
    <tabs-group v-model="tab" :data-list="tabList" @change="() => $refs.table.load()" class="flex-fixed" style='width: 100%'/>
    <a-space :size="30" style="padding: 0 24px" class="flex-fixed">
      <a-form ref="form" layout="inline" style="margin: 20px auto; padding: 0 20px">
        <a-form-item>
          <a-input v-model:value="formData.name" placeholder="请输入姓名" allowClear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search">查询</a-button>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-space>
    <common-table
      ref="table"
      :show-toolbar="false"
      :fetch="getTableApi"
      :fetch-params="apiParams"
      :columns="columns"
      class="flex-auto-height"
    >
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <template #identity_img_url="{ text, scope }">
        <avatar :src="scope.identity_img_url" style="width: 100%" />
      </template>
      <template #action="{ scope }">
        <span style="color: #62b8b1; cursor: pointer" @click="peopleDetails(scope)"> 详情 </span>
      </template>
    </common-table>
  </div>
</template>

<script>
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import Avatar from '@gis/lib/components/img-viewer/index.vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import { realityPeopleList,specialCrowdPersonnelList } from '@gis/lib/api';
import { getEnumText } from '@gis/lib/enums/index.js';
// import { openPeopleDetailsDialog } from '@/views/reality-people/components/people-details/peopleDetailsDialog.js';

export default {
  name: 'yard-details-table',
  components: { Avatar, TabsGroup, CommonTable },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      tab: '1',
      formData: {
        name: '',
      },
      tabList: [
        { label: '户籍人口', value: '1' },
        { label: '流动人口', value: '2' },
        { label: '关爱人员', value: '3' },
        { label: '重点人员', value: '4' },
      ],
      columns: [
        {
          title: '头像',
          dataIndex: 'identity_img_url',
          scopedSlots: { customRender: 'identity_img_url' },
          align: 'center',
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
        },
        // {
        //   title: '人员标记',
        //   dataIndex: 'type_name',
        //   ellipsis: true,
        // },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
    };
  },
  computed: {
    apiParams() {
      return {
        building_id: this.data.id,
        is_flow: this.tab == 1 ? '0' : this.tab == 2 ? '1' : '',
        people_type: this.tab == 3 ? 2 : this.tab == 4 ? 4 : '',
        type: '',
      };
    },
  },
  watch: {
    data: {
      immediate: true,
      handler(val) {
        if (!val.id) return;
        this.$nextTick(() => {
          this.$refs.table.load();
        });
      },
    },
  },
  methods: {
    async getTableApi(params) {
      if (!params || !params.building_id) return;
      params = Object.assign(params, { name: this.formData.name });
      /*if (this.tab === '1') {
        return this.handleTableResult(await peopleTempList(params));
      }*/
      const apiEnum = {
        1: realityPeopleList,
        2: realityPeopleList,
        3: specialCrowdPersonnelList,
        4: specialCrowdPersonnelList,
      };
      return this.handleTableResult(await apiEnum[this.tab](params));
    },
    search() {
      this.$refs.table.load();
    },
    reset() {
      this.formData.name = '';
      this.$nextTick(() => {
        this.search();
      });
    },
    peopleDetails(data) {
      // openPeopleDetailsDialog(data);
    },
  },
};
</script>

<style scoped lang="less">
.yard-details-table {
  color: #ffffff;
  width: 100%;
  height: 100%;
  ///deep/ .avatar {
  //  width: 50px;
  //  height: 65px;
  //}
  ///deep/.ant-input {
  //  color: #ffffff;
  //}
}
</style>
